<script>
/*
 * @Author: Your name
 * @Date:   2020-06-20 09:42:39
 * @Last Modified by:   Your name
 * @Last Modified time: 2020-06-20 17:38:55
 */
</script>
<template>
    <div class="tabbarItem" @click="clickRouter">
        <div v-if="!isActive"><slot name="item-icon"></slot></div>
        <div v-else><slot name="item-icon-active"></slot></div>
        <div :style="colorStyle"><slot name="item-text"></slot></div>
    </div>
</template>
<script>
export default {
    props:{
        path:String,
        colorActive:{
            type:String,
            default:"hotpink"
        }
    },
    data(){
        return{
            
        }
    },
    computed:{
        isActive(){
            //tabbar点击高亮显示
            return this.$route.path.indexOf(this.path) != -1;
        },
        colorStyle(){
            //可以更灵活的在外面组件标签中设置颜色,  经验：一个样式过于复杂，可以放在methods或者computed中
            return this.isActive ? {color:this.colorActive} : {};
        }
    },
    methods:{
        clickRouter(){
            this.$router.push(this.path);
        }
    }
}
</script>
<style lang="less" scoped>
    .tabbarItem{
        text-align: center;
        flex: 1;
        img{
            width: 25px;
            height: 25px;
            margin-top: 2px;
        }
        
    }
</style>